<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义数据区域</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size:10px;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #f5f5f5;
        }

        .container {
            display: flex;
            width: 99%;
            max-width: 100%;
        }

        .left, .right {
            background-color: #fff;
            padding:0 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .left{
            flex-grow: 7;
        }
        .right {
            flex-grow: 3;
        }

        h5 {
            margin-bottom: 10px;
        }

        input[type="text"], textarea {
            width: 90%;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

        /* 表格样式 */
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            position: sticky;
            top: 0;
            background-color: #f2f2f2;
            z-index: 1;
        }

        /* 容器样式 */
        .tbcontainer {
            height: 300px;
            overflow: auto;
            border: solid 1px #ccc;
            scrollbar-width: thin;
            scrollbar-color: #888 #f2f2f2;
        }

        /* 滚动条样式 */
        .tbcontainer::-webkit-scrollbar {
            width: 8px;
        }

        .tbcontainer::-webkit-scrollbar-track {
            background: #f2f2f2;
        }

        .tbcontainer::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 4px;
        }

        .tbcontainer::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
        .delete-button {
            padding: 3px 3px;
            border: none;
            border-radius: 3px;
            background-color: #f44336;
            color: white;
            font-size: 10px;
            cursor: pointer;
        }
        .delete-button:hover {
            background-color: #d32f2f;
        }

        .normal-button {
            padding: 3px 3px;
            border: none;
            border-radius: 3px;
            background-color: #4E7EFF;
            color: white;
            font-size: 10px;
            cursor: pointer;
        }
        .normal-button:hover {
            background-color: #4E6EF2;
        }

        .locate-button {
            padding: 3px 3px;
            border: none;
            border-radius: 3px;
            background-color: #0abb87;
            color: white;
            font-size: 10px;
            cursor: pointer;
        }
        .locate-button:hover {
            background-color: #0a9966;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="left">
        <h5>待添加区域：</h5>
        <input type="text" id="inputKey1" oninput="loadData();" placeholder="请输入数据区域关键字搜索" />
        <div class="tbcontainer">
            <table id="bkmkTable">
                <thead>
                <tr>
                    <th>数据区域</th>
                    <th>显示文字</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 大量的数据行 -->
                <!--<tr>-->
                <!--<td>AAA</td>-->
                <!--<td>BBB</td>-->
                <!--<td><button class="normal-button">添加</button></td>-->
                <!--</tr>-->

                </tbody>
            </table>
        </div>
    </div>
    <div class="right">
        <h5>已添加区域：</h5>
        <input type="text" id="inputKey2" oninput="loadData();" placeholder="请输入数据区域关键字搜索" />
        <div class="tbcontainer">
            <table id="bkmkTable2">
                <thead>
                <tr>
                    <th>数据区域</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 大量的数据行 -->
                <!--<tr>-->
                <!--<td>AAA</td>-->
                <!--<td>BBB</td>-->
                <!--<td><button class="delete-button">删除</button> <button class="normal-button">定位</button></td>-->
                <!--</tr>-->

                </tbody>
            </table>
        </div>
    </div>
</div>

<script>

    let definedDataRegionJson = window.external.UserParams;

    //加载数据
    function loadData() {
        var kWord1 = document.getElementById("inputKey1").value;
        var kWord2 = document.getElementById("inputKey2").value;

        var dataRegionJson = pageofficectrl.word.DataRegionsAsJson;
        searchDataRegion(definedDataRegionJson, dataRegionJson, kWord1);
        searchDataRegion2(dataRegionJson, kWord2);
    }

    //加载待添加区域列表
    function searchDataRegion(drDefinedJson, drJson, s){
        var tb1 = document.getElementById("bkmkTable");
        var rCount = tb1.rows.length;
        for (var i = 1; i < rCount; i++) {
            tb1.deleteRow(1);
        }

        if('' == drDefinedJson) drDefinedJson = '[]';
        var definedDataRegionObj = JSON.parse(drDefinedJson);
        var dataRegionsJson = drJson;
        if('' == dataRegionsJson) dataRegionsJson = '[]';
        var dataRegionsObj = JSON.parse(dataRegionsJson);

        var oTable = document.getElementById("bkmkTable");
        var tbodyObj = oTable.tBodies[0];
        for(let key in definedDataRegionObj ){
            let drName = definedDataRegionObj[key].name;
            let drCaption =  definedDataRegionObj[key].caption;
            //alert("数据区域："+drName+"; 值："+drValue);

            let bFind = false;
            for(let k in dataRegionsObj){
                if(dataRegionsObj[k].name == drName){
                    bFind = true;
                    break;
                }
            }

            if(bFind) continue;

            if (drName.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1) {
                var oTr = tbodyObj.insertRow();
                var oTd = oTr.insertCell();
                oTd.innerHTML = drName;
                oTd = oTr.insertCell();
                oTd.innerHTML = drCaption;
                oTd = oTr.insertCell();
                oTd.innerHTML = '<button class="normal-button" onclick="addDataRegion(\''+drName+'\',\''+drCaption+'\');loadData();">添加</button>';
            }
        }
    }

    //加载已添加区域列表
    function searchDataRegion2(drJson, s) {
        //删除所有行
        var tb1 = document.getElementById("bkmkTable2");
        var rCount = tb1.rows.length;
        for (var i = 1; i < rCount; i++) {
            tb1.deleteRow(1);
        }

        let dataRegionsJson = drJson;
        if('' == dataRegionsJson) dataRegionsJson = '[]';
        let dataRegionsObj = JSON.parse(dataRegionsJson);
        var oTable = document.getElementById("bkmkTable2");
        var tbodyObj = oTable.tBodies[0];
        for(let key in dataRegionsObj ){
            let drName = dataRegionsObj[key].name;

            if (drName.toLocaleLowerCase().indexOf(s.toLocaleLowerCase()) > -1) {
                var oTr = tbodyObj.insertRow();
                var oTd = oTr.insertCell();
                oTd.innerHTML = drName;
                oTd = oTr.insertCell();
                oTd.innerHTML = '<button class="delete-button" onclick="deleteDataRegion(\''+ drName +'\');loadData();">删除</button> <button class="locate-button" onclick="locateDataRegion(\''+ drName +'\');">定位</button>';
            }
        }

    }

    function locateDataRegion(drName) {
        pageofficectrl.word.LocateDataRegion(drName);
    }

    function deleteDataRegion(drName){
        pageofficectrl.word.DeleteDataRegion(drName);
    }

    function addDataRegion(drName, drValue){
        pageofficectrl.word.AddDataRegion(drName, drValue);
    }


    loadData();


</script>
</body>
</html>
